<!--
 * @Description: 
 * @Autor: 商晓彬
 * @Date: 2021-12-27 09:29:57
 * @LastEditors: 商晓彬
 * @LastEditTime: 2022-01-04 14:27:29
-->
<div id="main" class="production-task">
    <!-- 头 -->
    <div class="title">
        <div></div>
        <div (click)="full()" style="cursor: pointer;margin-left: 135px;">生产计划看板</div>
        <div class="flex-style">
            <div class="time-style mr20" [innerHTML]="time"></div>
            <div class="time-style">
                <div>{{date}}</div>
                <div>{{week}}</div>
            </div>
        </div>
    </div>
    <!-- 下半部分 -->
    <div style="padding: 0 30px;width: 100%;height: calc(90% - 21.61px);margin-top: 21.61px;">
        <!-- 查询 -->
        <div class="board-search">
            <div class="ui-g-2">
                <span style="color: #D9001B;">*</span>
                <span style="color: #FFFFFF;margin-right: 10px;">型号:</span>
                <p-dropdown name="model" filter="true" emptyFilterMessage="暂无数据" [options]="modelOptions"
                    [(ngModel)]="model" [style]="{'width':'150px'}" (onChange)="onchange($event)">
                </p-dropdown>
            </div>
            <div class="ui-g-4">
                <span style="color: #D9001B;">*</span>
                <span style="color: #FFFFFF;margin-right: 10px;">发次:</span>
                <p-dropdown name="sendTime" filter="true" emptyFilterMessage="暂无数据" [options]="sendTimeOptions"
                    [(ngModel)]="sendTime" [style]="{'width':'150px'}">
                </p-dropdown>
                <p-button label="查询" (onClick)="search()" style="margin-left: 100px;"></p-button>
            </div>
        </div>
        <div class="board-type" style="margin-top: 20px;">
            <div class="items">
                <div class="text">{{stuts.taskCount}}</div>
                <div class="text">任务数量</div>
            </div>
            <div class="items">
                <div class="text">{{stuts.completeCount}}</div>
                <div class="text">完成数量</div>
            </div>
            <div class="items">
                <div class="text">{{stuts.stepCompletionSchedule}}%</div>
                <div class="text">任务数量完成度</div>
            </div>
            <div class="items">
                <div class="text" style="color: #FFFF80;">{{stuts.taskHour}}</div>
                <div class="text">任务工时</div>
            </div>
            <div class="items">
                <div class="text" style="color:#95F204 ;">{{stuts.completeHour}}</div>
                <div class="text">完成工时</div>
            </div>
            <div class="items">
                <div class="text" style="color: #D9001B;">{{stuts.hourCompletionSchedule}}%</div>
                <div class="text">工时完成度</div>
            </div>
        </div>
        <div class="board-table" style="margin-top: 20px;">
            <div class="primeng-datatable-container" style="height:100%;" *ngIf="visiable">
                <p-treeTable [value]="tableData" [paginator]="false" [lazy]="true" [scrollable]="true" ScrollWidth="100%"
                scrollHeight="calc(100% - 1px)" [autoLayout]="true">
                    <ng-template pTemplate="header">
                        <tr>
                            <th style="width: 100px;">层级</th>
                            <th style="width: 100px;">图号</th>
                            <th style="width: 80px;">名称</th>
                            <th style="width: 100px;">计划开始时间</th>
                            <th style="width: 100px;">计划完成时间</th>
                            <th style="width: 60px;">任务数量</th>
                            <th style="width: 60px;">完成数量</th>
                            <th style="width: 80px;">任务数量完成度</th>
                            <th style="width: 60px;">任务工时</th>
                            <th style="width: 60px;">完成工时</th>
                            <th style="width: 80px;">工时完成度</th>
                            <th style="width: 60px;">状态</th>
                        </tr>
                    </ng-template>
                    <ng-template pTemplate="body" let-rowNode let-rowData="rowData">
                        <tr [ttRow]="rowNode">
                            <td style="width: 100px;">
                                <p-treeTableToggler [rowNode]="rowNode"></p-treeTableToggler>
                                {{rowData.rank}}
                            </td>
                            <td style="width: 100px;">{{rowData.drawingNo}}</td>
                            <td style="width: 80px;">{{rowData.name}}</td>
                            <td style="width: 100px;">{{rowData.planStartTime | momentFormat:'YYYY-MM-DD'}}</td>
                            <td style="width: 100px;">{{rowData.planCompleteTime | momentFormat:'YYYY-MM-DD'}}</td>
                            <td style="width: 60px;">{{rowData.taskCount}}</td>
                            <td style="width: 60px;">{{rowData.completeCount}}</td>
                            <td style="width: 80px;">{{rowData.stepCompletionSchedule}}%</td>
                            <td style="width: 60px;">{{rowData.taskHour}}</td>
                            <td style="width: 60px;">{{rowData.completeHour}}</td>
                            <td style="width: 80px;">{{rowData.hourCompletionSchedule}}%</td>
                            <td style="width: 60px;">{{rowData.state}}</td>
                        </tr>
                    </ng-template>
                </p-treeTable>

            </div>
        </div>
    </div>

</div>